<div id="tab-contact" class="bui-page">
    <header id="tab-contact-header" class="bui-bar">
        <div class="bui-bar-left">
            <div class="bui-btn sidemenu">
                <img class="ring userface" src="images/face.png" alt="">
            </div>
        </div>
        <div class="bui-bar-main">
            联系人
        </div>
        <div class="bui-bar-right">
            <a class="bui-btn">添加</a>
        </div>
    </header>
    <main>
        <div id="contactScroll" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                
                <div class="bui-searchbar">
                    <div class="search"><i class="icon-search"></i>搜索</div>
                </div>
                <ul class="bui-nav nav-group">
                    <li class="bui-btn bui-box-vertical">
                        <i class="icon warning">&#xe67a;</i>
                        <div class="span1">新朋友</div>
                    </li>
                    <li class="bui-btn bui-box-vertical">
                        <i class="icon danger">&#xe664;</i>
                        <div class="span1">特别关心</div>
                    </li>
                    <li class="bui-btn bui-box-vertical">
                        <i class="icon success">&#xe675;</i>
                        <div class="span1">群组</div>
                    </li>
                    <li class="bui-btn bui-box-vertical">
                        <i class="icon warning">&#xe67f;</i>
                        <div class="span1">公众号</div>
                    </li>
                </ul>
                <dl id="device" class="bui-accordion">
                    <dt class="bui-btn bui-box">
                        <i class="icon-accordion"></i>
                        <div class="span1">我的设备</div>
                        <div class="time">1/2</div>
                    </dt>
                    <dd>
                        <!-- 列表的灵活性结构跟消息不一样 -->
                        <ul class="bui-list friend-list">
                            <li class="bui-btn bui-box">
                                <div class="ring ring-group">
                                    <i class="icon">&#xe676;</i>
                                </div>
                                <div class="span1">
                                    <h3 class="item-title">
                                        我的电脑
                                    </h3>
                                    <p class="item-text bui-text-hide">[离线]无需数据线,手机轻松传文件到电脑</p>
                                </div>
                            </li>
                            <li class="bui-btn bui-box">
                                <div class="ring ring-pc">
                                    <i class="icon">&#xe61f;</i>
                                </div>
                                <div class="span1">
                                    <h3 class="item-title">
                                        发现新设备
                                    </h3>
                                    <p class="item-text">
                                        搜索附近的设备,用QQ轻松连接设备.
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </dd>
                    
                    <dt class="bui-btn bui-box">
                        <i class="icon-accordion"></i>
                        <div class="span1">手机通讯录</div>
                        <div class="time">未启用</div>
                    </dt>
                </dl>
                <!-- QQ好友 -->
                <dl id="friend" class="bui-accordion">
                    <dt class="bui-btn bui-box">
                        <i class="icon-accordion"></i>
                        <div class="span1">我的好友</div>
                        <div class="time">19/49</div>
                    </dt>
                    <dd>
                        <!-- 列表的灵活性结构跟消息不一样 -->
                        <ul class="bui-list friend-list">
                            <li class="bui-btn bui-box" href="pages/chat/chat.html">
                                <div class="ring ring-group">
                                    <i class="icon">&#xe60f;</i>
                                </div>
                                <div class="span1">
                                    <h3 class="item-title">
                                        八弟 
                                    </h3>
                                    <p class="item-text bui-text-hide">[在线]更新了说说</p>
                                </div>
                            </li>
                            <li class="bui-btn bui-box" href="pages/chat/chat.html">
                                <div class="ring ring-pc">
                                    <i class="icon">&#xe60f;</i>
                                </div>
                                <div class="span1">
                                    <h3 class="item-title">
                                        阿宏 
                                    </h3>
                                    <p class="item-text bui-text-hide">[在线]更新了日志</p>
                                </div>
                            </li>
                        </ul>
                    </dd>
                    <dt class="bui-btn bui-box">
                        <i class="icon-accordion"></i>
                        <div class="span1">品高软件</div>
                        <div class="time">156/230</div>
                    </dt>
                    <dd>
                        <!-- 列表的灵活性结构跟消息不一样 -->
                        <ul class="bui-list friend-list">
                            <li class="bui-btn bui-box">
                                <div class="ring ring-group">
                                    <i class="icon">&#xe60f;</i>
                                </div>
                                <div class="span1">
                                    <h3 class="item-title">
                                        区柏荣 
                                    </h3>
                                    <p class="item-text bui-text-hide">[在线]更新了说说</p>
                                </div>
                            </li>
                            <li class="bui-btn bui-box">
                                <div class="ring ring-pc">
                                    <i class="icon">&#xe60f;</i>
                                </div>
                                <div class="span1">
                                    <h3 class="item-title">
                                        邝德如 
                                    </h3>
                                    <p class="item-text bui-text-hide">[在线]更新了日志</p>
                                </div>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </div>
        </div>
    </main>
</div>